<%layout("/common/layout.html"){%>


<div class="container">
    <div class="row cg-dir">
        <div class="col-md-3 dir-column dir-main">
            <span>最新设计</span>
        </div>
    </div>

    <div class="row">
        <div class="cg-shirts">

            <%var i=1;%>
            <%for(li in list){%>
            <%if(i>4){i=i-4;}%>

            <div class="cg-shirt col_0${i}" data-shirtid="${li.id}">
                <a href="${ctxPath}/design?design=${li.id}">
                    <img src="${li.img1}" alt="" class="img-thumbnail cg-shirt-img">
                </a>

                <div class="t-topbar">
                    <a href="" class="btn btn-danger tb-buy">
                        <span class="glyphicon glyphicon-shoppingcart" aria-hidden="true"></span>
                        购买
                    </a>
                    <a href="" class="btn btn-default tb-comment">
                        <span class="glyphicon glyphicon-comment"></span>
                    </a>
                    <button type="button" href="" class="btn btn-default tb-vote">
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                    </button>
                </div>
            </div>

            <%i++;%>
            <%}%>

        </div>
    </div>
    <div class="loading"></div>
    <div class="cg-error">
        <p>啊欧，网络错误，请点击重试</p>
    </div>
    <div class="cg-more">
        <button class="btn btn-info">点击加载更多</button>
    </div>

</div>


<script src="${ctxPath}/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/js/bootstrap.min.js"></script>
<script src="${ctxPath}/js/cg_co.js"></script>


<script>
    $(function () {
        (function () {
            var topCalculate = function (el) {
                var maxHeight = 0;

                $(el).each(function () {
                    var col = $(this).prop('class').split(" ")[1],
                            $prevEl = $(this).prevAll('.' + col).filter(':first'),
                            prevHeight = $prevEl.height() || 0,
                            prevTop = $prevEl.prop('offsetTop') || 0;

                    $(this).css("top", prevTop + prevHeight + 15);
                    maxHeight = Math.max(maxHeight, parseInt($(this).prop('offsetTop')) + $(this).height() + 15);
                });
                $(el).parent().height(maxHeight);
            };

            var isLoad = true,
                    t_img;

            var imgsIsLoad = function () {
                $('.cg-shirt-img').each(function () {
                    if (this.height === 0) {
                        isLoad = false;
                    }
                });

                if (isLoad) {
                    clearTimeout(t_img);
                    topCalculate($('.cg-shirt'));
                } else {
                    isLoad = true;
                    a_img = setTimeout(imgsIsLoad, 500);
                }
            };
            imgsIsLoad();

            var ajaxNum = 0,
                pageReq = 1,
                col = ['col_01', 'col_02', 'col_03', 'col_04', 'col_01', 'col_02', 'col_03', 'col_04'];

            var shirtAjaxHandle = function (data) {
                var result = data.imgs,
                        curT,
                        i = 0, str = '';
                $('.cg-error').hide();
                for (; i < result.length; i++) {
                    curT = result[i];
                    str += '<div class="cg-shirt ' + col[i] + '" data-shirtId=' + curT.shirtId + '>';
                    str += '<a href=/' + curT.shirtSrc + '>';
                    str += '<img src=' + curT.imgSrc + ' alt=' + curT.desc + ' class="img-thumbnail cg-shirt-img">';
                    str += '</a>';
                    str += '<div class="t-topbar">';
                    str += '<a href="" class="btn btn-danger tb-buy">';
                    str += '<span class="glyphicon glyphicon-shoppingcart" aria-hidden="true"></span> 购买';
                    str += '</a>';
                    str += '<a href="" class="btn btn-default tb-comment">';
                    str += '<span class="glyphicon glyphicon-comment"></span>';
                    str += '</a>';
                    str += '<button type="button" href="" class="btn btn-default tb-vote">';
                    str += '<span class="glyphicon glyphicon-thumbs-up"></span>';
                    str += '</button>' + '</div>' + '</div>';
                }
                $('.cg-shirts').append(str);

                imgsIsLoad();
            };

            var themeAjaxHandle = function (data) {
                var result = data.themes,
                        curT,
                        i = 0, str = '';
                $('.cg-error').hide();
                for (; i < result.length; i++) {
                    curT = result[i];
                    str += '<div class="cg-shirt ' + col[i] + ' co-theme' + '" data-themeId=' + curT.themeId + '>';
                    str += '<a href=/' + curT.themeSrc + '>';
                    str += '<img src=' + curT.imgSrc + ' alt=' + curT.desc + ' class="img-thumbnail cg-shirt-img">';
                    str += '</a>';
                    str += '<p class="co-themeName">' + curT.themeName + '</p>';
                    str += '<p class="co-themeDesc">' + curT.desc + '</p>';
                    str += '</div>';
                }
                $('.cg-shirts').append(str);

                imgsIsLoad();
            };

            var flowAjax = function () {
                if (ajaxNum == 0 || ajaxNum % 5 != 0) {
                    $.ajax({
                        url: '/design/moreByHot?page=' + pageReq,
                        type: 'GET',
                        dataType: 'json'
                    })
                    .done(function (data) {
                        if (!$('.cg-shirt:first')[0].dataset.themeid) {
                            shirtAjaxHandle(data);
                        } else {
                            themeAjaxHandle(data);
                        }

                        ajaxNum++;
                        pageReq++;
                    })
                    .fail(function () {
                        $('.cg-error').show();
                    });
                } else {
                    $('.cg-more').show();
                }
            };

            $(document).scroll(function (event) {
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    flowAjax();
                }
            });

            $(document).ajaxSend(function (event, xhr, settings) {
                $('.loading').show();
            }).ajaxComplete(function (event, xhr, settings) {
                $('.loading').hide();
            });

            $('.cg-error').click(function (event) {
                flowAjax();
            });

            $('.cg-more').click(function (event) {
                ajaxNum = 0;
                flowAjax();
                $(this).hide();
            });
        })();
    });
</script>


<%}%>